<template>
    <el-tabs
        v-model="queryList.orgType"
        type="card"
        class="demo-tabs"
        @tab-change="handleClick"
    >
        <el-tab-pane label="采购单位" :name="1"></el-tab-pane>
        <el-tab-pane label="门店" :name="2"></el-tab-pane>
        <el-tab-pane label="供应商" :name="3"></el-tab-pane>
    </el-tabs>
    <el-container>
		<el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    :disabled="selection.length==0"
                    @click="batch_del"
                >删除</el-button>
                <!-- <el-button
                    type="primary"
                    plain
                    :disabled="selection.length!=1"
                    @click="permission"
                >权限设置</el-button> -->
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-form-item label="角色编码" label-width="100px">
                        <el-input
                            placeholder="---请输入角色编码---"
                            v-model="queryList.roleCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="角色名称" label-width="100px">
                        <el-input
                            placeholder="---请输入角色名称---"
                            v-model="queryList.roleName"
                            style="width: 300px"
                        />
                    </el-form-item>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>
        <el-main class="nopadding">
            <scTable
                ref="mytable"
                :queryType="'role/pages'"
                :queryList="queryList"
                :sort-orders="['ascending', 'descending']"
                @selection-change="selectionChange"
                row-key="roleId"
                key="roleId"
                stripe
                show-summary
                remoteSummary
            >
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="#" type="index" width="50"></el-table-column>
                <el-table-column label="角色编码" prop="roleCode" width="150"></el-table-column>
                <el-table-column label="角色名称" prop="roleName" width="150"></el-table-column>
                <el-table-column label="备注" prop="remark" min-width="150"></el-table-column>
                <el-table-column label="操作" fixed="right" align="right" width="240">
                    <template #default="scope">
                        <el-button-group>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="table_show(scope.row, scope.$index)"
                            >查看</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="table_edit(scope.row, scope.$index)"
                            >编辑</el-button>
							<el-button
                                text
                                type="primary"
                                size="small"
                                @click="permission(scope.row, scope.$index)"
                            >权限设置</el-button>
                            <!-- <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
								<template #reference>
									<el-button text type="primary" size="small">删除</el-button>
								</template>
                            </el-popconfirm>-->
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>

    <save-dialog
        v-if="dialog.save"
        ref="saveDialog"
        @success="handleSaveSuccess"
        @closed="dialog.save=false"
    ></save-dialog>

    <permission-dialog
        v-if="dialog.permission"
        ref="permissionDialog"
        @closed="dialog.permission=false"
    ></permission-dialog>
</template>

<script>
import saveDialog from "./save";
import permissionDialog from "./permission";

export default {
    name: "role",
    components: {
        saveDialog,
        permissionDialog, 
    },
    data() {
        return {
            dialog: {
                save: false,
                permission: false,
            },
            apiObj: this.$API.system.role.list,
            selection: [],
            queryList: {
                orgType: 1,
            },
        };
    },
    methods: {
        //添加
        add() {
            this.dialog.save = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Add").setData({orgType:this.queryList.orgType});
            });
        },
        //编辑
        table_edit(row) {
            this.dialog.save = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("edit").setData(row);
            });
        },
        //查看
        table_show(row) {
            this.dialog.save = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("show").setData(row);
            });
        },
        //权限设置
        permission(row) {
            this.dialog.permission = true;
            this.$nextTick(() => {
                this.$refs.permissionDialog.open();
				this.$refs.permissionDialog.setData(row);
            });
        },
        //批量删除
        async batch_del() {
            this.$confirm(
                `确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`,
                "提示",
                {
                    type: "warning",
                }
            )
                .then(() => {
                    const loading = this.$loading();
                    this.$refs.table.refresh();
                    loading.close();
                    this.$message.success("操作成功");
                })
                .catch(() => {});
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selection = selection;
        },
        //表格内开关
        changeSwitch(val, row) {
            row.status = row.status == "1" ? "0" : "1";
            row.$switch_status = true;
            setTimeout(() => {
                delete row.$switch_status;
                row.status = val;
                this.$message.success("操作成功");
            }, 500);
        },
        //搜索
        upsearch() {},
        //根据ID获取树结构
        filterTree(id) {
            var target = null;
            function filter(tree) {
                tree.forEach((item) => {
                    if (item.id == id) {
                        target = item;
                    }
                    if (item.children) {
                        filter(item.children);
                    }
                });
            }
            filter(this.$refs.table.tableData);
            return target;
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "add") {
                this.$refs.table.refresh();
            } else if (mode == "edit") {
                this.$refs.table.refresh();
            }
        },
		async handleClick(tab) {
            this.queryList = { orgType: tab };
            await this.$nextTick();
            await this.opBindData();
        },
		async initOptions(){},
		async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
    },
	async mounted() {
        await this.initOptions();
        await this.opBindData();
    },
};
</script>

<style>
</style>
